{% extends 'base.html' %}

{% block content %}
    <div class="container" style="padding: 20px; margin-bottom: 20px; border: 1px solid black; border-radius: 15px; background-color: aquamarine;">
        <h1 class="text-center text-danger display-4"> Simple Image Upload App Using Django</h1>
    </div>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for post in posts %}
        <div class="col">
            <div class="card text-center border-warning h-100" style="box-shadow: 5px 10px 18px #888888;">
                <img src="{{ post.image.url }}" class="card-img-top" alt="{{ post.title }}">
                <div class="card-body">
                    <h5 class="card-title">{{ post.title }}</h5>
                    <p class="card-text">{{ post.content }}</p>
                    <a href="{% url 'detail' post.id %}" class="btn btn-primary">View Image</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
{% endblock %}




